import React, { useState } from 'react';
import { Modal, message, Spin } from 'antd';
import { isSuccess } from '@/utils/request';

import { querySalaryUnView } from '@/services/salaryManage/salaryCalculate';

import InfiniteScroll from 'react-infinite-scroller';

import styles from './index.less';

const pageSize = 40;

const useEmployeeNoView = (organizationCode, year, month) => {
    const [pageData, setPageData] = useState({
        total: null,
        list: []
    });
    const [visible, setVisible] = useState(false);
    const [hasMore, setHasMore] = useState(true);

    const onLoadMore = page => {
        if (page !== 1 && !hasMore) {
            return;
        }
        querySalaryUnView({
            organizationCode,
            year,
            month,
            page: {
                pageNo: page,
                pageSize
            }
        }).then(res => {
            if (isSuccess(res)) {
                const { data } = res;
                setPageData({
                    total: data.total,
                    list: pageData.list.concat(data.rows || [])
                });
                if (data.pages === page) {
                    setHasMore(false);
                }
            } else {
                message.error(res.msg);
            }
        });
    };

    const openModalFn = () => {
        setVisible(true);
        setHasMore(true);
        onLoadMore(1);
    };
    const cancelHandle = () => {
        setPageData({
            total: null,
            list: []
        });
        setVisible(false);
    };

    return {
        openModalFn,
        render() {
            return visible ? (
                <Modal
                    title="未查看员工列表"
                    visible={visible}
                    onCancel={cancelHandle}
                    destroyOnClose
                    centered
                    width={640}
                    zIndex={2000}
                    footer={null}
                >
                    <div className={styles.employeeScrollBox} style={{ maxHeight: 457, overflow: 'auto' }}>
                        <InfiniteScroll
                            initialLoad={false}
                            loadMore={onLoadMore}
                            pageStart={1}
                            loader={
                                <div className={styles.loader}>
                                    <Spin spinning></Spin>
                                </div>
                            }
                            hasMore={hasMore}
                            useWindow={false}
                        >
                            {pageData?.list?.map(({ empNo, name }) => (
                                <div key={empNo} className={styles.employeeChild}>
                                    <span className={styles.employeeName}>{name}</span>
                                    <span className={styles.employeeNo}>({empNo})</span>
                                </div>
                            ))}
                        </InfiniteScroll>
                    </div>
                </Modal>
            ) : null;
        }
    };
};
export default useEmployeeNoView;
